<template>
  <div class="listSearchWrap sysLogSearch">
    <a-row :gutter="[8, 16]">
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="3"
        :xxl="3">
        <common-select
          :options="logTitles"
          :defaultValue="queryParams.title"
          @changeoption="changeOption('title', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('logTitle')"
          mode="multiple"
          :maxTagCount="1"
          style="width:100%"></common-select>
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="3"
        :xxl="3">
        <common-select
          :options="systemLogTypeDictCode"
          :defaultValue="queryParams.type"
          @changeoption="changeOption('type', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('logType')"
          :replaceFields="typeReplaceFields"
          mode="multiple"
          :maxTagCount="1"
          style="width:100%"></common-select>
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="3"
        :xxl="3">
        <common-select
          :options="userData"
          :defaultValue="queryParams.createBy"
          @changeoption="changeOption('createBy', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('operationUser')"
          mode="multiple"
          :maxTagCount="1"
          style="width:100%"></common-select>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="8"
        :xl="7"
        :xxl="7">
        <a-range-picker
          @change="onRangeChange"
          :allow-clear="true"
          :value="defaultDateRange"
          :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
          format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledDate"
          style="width: 100%;" />
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="3"
        :xxl="3">
        <a-input v-model="queryParams.checkValue" :placeholder="$t('checkValue')" :allow-clear="true" @keyup.enter="handleSearch"/>
      </a-col>
    </a-row>
    <a-row>
      <a-col
        :xs="24"
        :sm="24"
        :md="14"
        :lg="16"
        :xl="6"
        :xxl="5">
        <div class="searchBtns">
          <a-button-group>
            <auth-button type="primary" :auth="managePerms.businessLog.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
          <auth-button :auth="managePerms.businessLog.export" @click="exportSysLog" :loading="exporting">
            <i class="iconfont icon-xiazai"></i>
            {{ $t('export') }}
          </auth-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import moment from 'moment'
import sysLogApi from '@/api/modules/system/operateLog'
import userApi from '@/api/modules/system/user'
import { downloadBlobFile } from '@/utils/functions'
export default {
  components: {
    AuthButton,
    CommonSelect
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.sysDataLog.queryParams,
      systemLogTypeDictCode: (state) => {
        return state.dict.systemLogTypeDictCode.filter(
          (logType) => logType.name != "查询"
            && logType.name != "登出"
            && logType.name != "导入"
            && logType.name != "导出"
            && logType.name != "上传"
            && logType.name != "下载")
      }
    }),
    // 日期选择的默认值
    defaultDateRange () {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    }
  },
  data () {
    return {
      managePerms,
      logTitles: [],
      filterLogTitles: [],
      typeReplaceFields: {
        key: 'value',
        value: 'value',
        title: 'name'
      },
      userData: [],
      exporting: false
    }
  },
  watch: {
  },
  created () {
    this.getTitleOptionsData()
    this.getUserData()
  },
  methods: {
    moment,
    // 获取下拉日志标题数据
    getTitleOptionsData () {
      sysLogApi.getSysLogTitlesData().then(res => {
        this.filterLogTitles = res.data.filter((logTitle) =>
          logTitle.name == "新增配置文件" || logTitle.name == "编辑配置文件" || logTitle.name == "删除配置文件"
          || logTitle.name == "新增ECU版本" || logTitle.name == "编辑ECU版本" || logTitle.name == "删除ECU版本"
          || logTitle.name == "新增车辆版本" || logTitle.name == "编辑车辆版本" || logTitle.name == "删除车辆版本"
          || logTitle.name == "新增策略" || logTitle.name == "编辑策略" || logTitle.name == "删除策略"
          || logTitle.name == "新增任务" || logTitle.name == "删除任务"
          || logTitle.name == "新增车型" || logTitle.name == "编辑车型" || logTitle.name == "删除车型"
          || logTitle.name == "新增车辆" || logTitle.name == "编辑车辆" || logTitle.name == "删除车辆"
          || logTitle.name == "新增ECU" || logTitle.name == "编辑ECU" || logTitle.name == "删除ECU"
          || logTitle.name == "用户登录"
        )
        this.logTitles = this.filterLogTitles.map(item => {
          return {
            id: item.code,
            name: item.name
          }
        })
      })
    },
    handleSearch () {
      this.$emit('clickbtn', { type: 'searchData', data: true })
    },
    clearCondition () {
      this.$store.commit('resetSysDataLogQueryParams')
      this.handleSearch()
    },
    onRangeChange (date, dateString) {
      this.queryParams.startTime = dateString[0]
      this.queryParams.endTime = dateString[1]
    },
    disabledDate (current) {
        return current && current > moment().endOf('day')
    },
    changeOption (key, val) {
      this.queryParams[key] = val
    },
    // 获取所有用户数据
    getUserData () {
      this.userData = []
      userApi.getUserSelect().then(res => {
        this.userData = res.data.map(item => {
          return {
            id: item.account,
            name: item.name + '(' + item.account + ')'
          }
        })
      }).finally(() => {
      })
    },
    // 导出
    exportSysLog () {
      this.exporting = true
      const params = { ...this.queryParams }
      if (params.startTime) {
        params.startTime = params.startTime + ':00'
      }
      if (params.endTime) {
        params.endTime = params.endTime + ':00'
      }
      sysLogApi.exportSysLogData(params).then(res => {
        // const data = new Blob([res], { type: 'application/vnd.ms-excel' })
        downloadBlobFile(res,'export_dataOperateLog.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    }
  }
}
</script>
